import React, { useEffect, useState } from 'react'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'

import { CheckLanguage } from '../../../util/function'

type MenuBottomProps = {
  collapsed?: boolean
  setCollapsed?: Function
  setRowSpan?: Function
  language: 'zh_CN' | 'en_US'
}

const MenuBottom = (props: MenuBottomProps) => {
  const { collapsed, setCollapsed, setRowSpan, language } = props
  const [version, setVersion] = useState('')

  useEffect(() => {
    setVersion('0.0.2')
  }, [])

  return (
    <div className='bottom'>
      <div className='version'>
        {collapsed ? null : CheckLanguage('version', language) + ': '}
        {version}
      </div>
      <div
        className='collapsed-div'
        onClick={() => {
          let span = 8
          setCollapsed && setCollapsed(!collapsed)
          if (!collapsed) {
            span = 12
          }
          setRowSpan && setRowSpan(span)
        }}
      >
        {collapsed ? <RightOutlined /> : <LeftOutlined />}
      </div>
    </div>
  )
}

export default MenuBottom
